<template>
  <!-- 应用卡片展示 -->
  <div id="statisticsCardDisplay">
    <el-row :gutter="20">
      <el-col :sm="24" :md="12">
        <el-card shadow="hover" :body-style="{ padding: '0px' }">
          <h2 class="title">热门应用统计</h2>
          <!-- 卡片主体 -->
          <div class="cardBody">
            <VChart :option="appAnswerCountOptions"/>
          </div>
        </el-card>
      </el-col>

      <el-col :sm="24" :md="12">
        <el-card shadow="hover" :body-style="{ padding: '0px' }">
          <h2 class="title">应用结果统计</h2>
          <!-- 卡片主体 -->
          <div class="cardBody">
            <el-form :model="form" inline label-width="80px">
              <el-form-item label="应用 id">
                <el-input v-model="form.id" />
              </el-form-item>
              <el-form-item>
                <el-button type="primary" :icon="Search" @click="loadAppAnswerResultCountData">搜索</el-button>
              </el-form-item>
            </el-form>
          
            <VChart :option="appAnswerResultCountOptions"/>
          </div>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script setup lang="ts">
import { computed, onMounted, ref, watchEffect } from "vue";
import { getAppAnswerCountUsingGet, getAppAnswerResultCountUsingGet } from "@/api/appStatisticController";
import VChart from "vue-echarts";
import "echarts";
import { ElMessage } from "element-plus";
import { ResponseCodeEnum } from "@/enums";
import { Search } from "@element-plus/icons-vue";

const appAnswerCountList = ref<API.AppAnswerCountDTO[]>([]);
const appAnswerResultCountList = ref<API.AppAnswerResultCountDTO[]>([]);

/**
 * 加载数据
 */
const loadAppAnswerCountData = async () => {
  const res = await getAppAnswerCountUsingGet();
  if (res.data.code === ResponseCodeEnum.SUCCESS) {
    appAnswerCountList.value = res.data.data || [];
  } else {
    ElMessage.error("获取数据失败: " + res.data.message);
  }
};

// 统计选项
const appAnswerCountOptions = computed(() => {
  return {
    dataset: [
      {
        dimensions: ['应用 id', '答题人次'],
        source: appAnswerCountList.value.map((item) => [item.appId, Number(item.answerCount)])
      },
      {
        transform: {
          type: 'sort',
          config: { dimension: '答题人次', order: 'desc' }
        }
      }
    ],
    xAxis: {
      type: 'category',
      name: '应用 id',
      axisLabel: { interval: 0 }
    },
    yAxis: {
      type: 'value',
      name: '答题人次'
    },
    series: {
      type: 'bar',
      encode: { x: '应用 id', y: '答题人次' },
      datasetIndex: 1,
      label: {
        show: true,
        position: 'top', // 数字显示在柱状图的上方
        textStyle: {
          color: 'black' // 数字的颜色
        }
      }
    }
  };
});

// 查询表单
const form = ref({
  id: "",
});

/**
 * 加载数据
 */
const loadAppAnswerResultCountData = async () => {
  if (!form.value.id) {
    return;
  }

  const res = await getAppAnswerResultCountUsingGet({
    appId: form.value.id as any,
  });
  if (res.data.code === 0) {
    appAnswerResultCountList.value = res.data.data || [];
  } else {
    ElMessage.error("获取数据失败: " + res.data.message);
  }
};

// 统计选项
const appAnswerResultCountOptions = computed(() => {
  return {
    tooltip: {
      trigger: "item",
    },
    legend: {
      orient: "vertical",
      left: "left",
    },
    series: [
      {
        name: "应用答案结果分布",
        type: "pie",
        radius: "50%",
        data: appAnswerResultCountList.value.map((item) => {
          return { value: item.resultCount, name: item.resultName };
        }),
        emphasis: {
          itemStyle: {
            shadowBlur: 10,
            shadowOffsetX: 0,
            shadowColor: "rgba(0, 0, 0, 0.5)",
          },
        },
      },
    ],
  };
});

/**
 * 参数改变时触发数据的重新加载
 */
onMounted(() => {
  loadAppAnswerCountData();
});
</script>

<style scoped lang="less">
#statisticsCardDisplay {
  padding: 20px;

  .el-card {
    .title {
      font-size: 2em;
      padding: 0 20px;
    }

    .cardBody {
      display: flex;
      justify-content: center;
      align-items: left;
      flex-direction: column;
      position: relative;

      height: 300px;
    }
  }
}
</style>